<template>
	<view class="cunten">
		<view class="lodin" @click="addimg">
			<image :src="from.img" mode="" v-if="from.img !== ''" class="photo"></image>
			<u-icon name="camera-fill" color="#fff" size="60"></u-icon>
		</view>
		<view class="addlogo">
			<text>点击更换商户logo</text>
		</view>
		<view class="list" @click="toadd">

			<view class="list-left">
				<text>商户名称</text>
			</view>
			<view class="list-right">
				<text>{{from.name}}</text>
				<u-icon name="arrow-right" size="28"></u-icon>
			</view>
		</view>


		<view class="list" @click="addlive">

			<view class="list-left">
				<text>所在地</text>
			</view>
			<view class="list-right">
				<text>{{from.live}}</text>
				<u-icon name="arrow-right" size="28"></u-icon>
			</view>
		</view>
		<view class="btn">
			<button type="primary" @click="path" v-if="isshow">保存</button>
			<button type="primary" @click="path" v-else>修改</button>
		</view>

	</view>
</template>

<script>
	import store from '@/store/index.js'
	import {
		coordinateToAddress
	} from "../../api/login/login.js"
	import {
		merchant
	} from "../../api/merchant/index.js"
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				from: {
					name: "",
					nameImg:'',
					live: "",
					img: ""
				},
				isnote: false,
				isshow: true,
				action: 'http://www.example.com/upload',
				cityName: '',
				address: {
					tel: "",
					name: "",
					logo: "",
					agent_id: "32",
					reid: "", //大区
					pid: "", //省份
					cid: "", //城市
					id: "", //商户id（商户编辑商户信息的时候传）
					address: "", //商户地址（商户编辑商户信息的时候传）
					mark: "APP"

				},
				imglist: []
			}
		},
		computed: {
			...mapState([
				'tokenlist', //用户信息
			]),
		},
		onLoad() {
			let el = uni.getStorageSync("tokenlist")
			this.address.tel = el.tel
		},
		onShow() {
			let arr = uni.getStorageSync('addsj');
			uni.removeStorageSync('addsj');
			if (arr) {
				this.from = arr
			}
		},
		methods: {
			toadd() {
				uni.setStorageSync('addsj', this.from);
				uni.navigateTo({
					url: "/pages/merchant/addname"
				})
			},
		
			
			//添加位置
			addlive() {

				let that = this
				uni.chooseLocation({
					success: function(res) {
						// console.log('位置名称：' + res.name);
						// console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						that.from.live = res.name
						that.address.address = res.address
						coordinateToAddress({
							coordinate: res.longitude + ',' + res.latitude
						}).then(res => {
							if (res.code === 0) {
								console.log(res)
								// console.log(res.data.city.name)
								this.cityName = res.data.city.name
								// that.$u.vuex('vuex_city',this.cityName)
								uni.setStorageSync('cityName', JSON.stringify(res.data.district.name))
								console.log(res.data.district.name)
								// console.log(this.vuex_city)

								that.address.pid = res.data.province.id
								that.address.cid = res.data.city.id
								that.address.reid = res.data.district.id
								that.from.live = res.data.province.name + "·" + res.data.city.name +
									"·" + res.data.district.name
							}
						})

					}
				});

			},

			// 更换商户logou
			addimg() {
				let _this = this

				let policyBase64 = Base64.encode(JSON.stringify("LTAI4G2XZ3sCfQ5H3BT16qDR"))
				uni.chooseImage({
					count: 1, //默认9
					sizeType: "compressed", //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					fileType: 'image',
					name: 'file',
					success: function(res) {
						console.log(res.tempFiles[0].name)
						_this.imglist = res.tempFilePaths
						_this.from.img = res.tempFilePaths[0]
						_this.from.nameImg = Math.random().toFixed(5) + res.tempFiles[0].name
						
						uni.uploadFile({
							url:'https://alicloud-bytedance-video.oss-cn-beijing.aliyuncs.com', //阿里云上传地址
							filePath: _this.from.img,
							name: 'file', //必须填file 
							formData: {
								key: _this.from.nameImg,
								accessKeySecret: "dVhyFXYmeP9snXcXhOrvuXsdQbgvs3",
								accessKeyId: "LTAI4G2XZ3sCfQ5H3BT16qDR",
								success_action_status: "200", //让服务端返回200,不然，默认会返回204 
							},
							complete: (res) => {
								console.log(res, "1111111")
								let urlAl = 'https://alicloud-bytedance-video.oss-cn-beijing.aliyuncs.com' + '/' +_this.from.nameImg
								// Math.random(urlAl)
								console.log(urlAl)
								_this.from.ALImg = urlAl
							},

						})
					},
				})
				
			},

			// 创建修改商家
			path() {
				this.address.tel = this.$store.state.tokenlist.tel
				this.address.name = this.from.name
				this.address.logo = this.from.ALImg
				for (var key in this.from) {
					if (this.from[key] == "") {
						this.isnote = false
						uni.showLoading({
							icon: "none",
							title: '请完善信息'
						});
						setTimeout(function() {
							uni.hideLoading();
						}, 1500);
					} else {
						this.isnote = true
					}
				}
				if (this.isnote == true) {
					merchant({
						...this.address
					}).then(res => {
						console.log(res)
						if (res.code == 0) {
							uni.reLaunch({
								url: "/pages/merchant/cut?merchid=" + this.address.id
							})
						}
					})
				}


			}
		},
	}
</script>

<style lang="scss" scoped>
	.cunten {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100%;
		padding: 0 30rpx;
		background-color: #FFFFFF;
		overflow: hidden;
	}

	.lodin {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 180rpx;
		height: 180rpx;
		margin: 80rpx auto;
		margin-bottom: 10rpx;
		background-color: #c1c1c1;
		border-radius: 50%;

		.photo {
			position: absolute;
			width: 180rpx;
			height: 180rpx;
			border-radius: 50%;
		}
	}

	.addlogo {
		margin-bottom: 80rpx;
		font-size: 30rpx;
		line-height: 42rpx;
	}

	.list {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 60rpx;

		.list-left {
			font-size: 34rpx;
			font-weight: bold;
		}
	}

	.btn {
		position: fixed;
		bottom: 180rpx;
		left: 75rpx;
		width: 600rpx;
		height: 100rpx;
		margin: 0 auto;
		margin-top: 200rpx;

		button {
			border-radius: 52rpx;
		}
	}
</style>
